<!--
 * @Author: huangyq
 * @Date: 2022-04-22 14:04:09
 * @LastEditTime: 2023-12-06 09:57:24
 * @LastEditors: hyq
 * @Description: 缓存tag
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/components/hq-alive-tag/index.vue
-->
<template>
  <div class="hq-alive-tag">
    <div class="hq-alive-tag_container">
      <el-tag
        v-for="item in cacheNameOrders"
        :key="item.name"
        :closable="route.name !== item.name"
        class="hq-alive-tag_ml"
        :type="route.name === item.name ? 'success' : 'info'"
        @click="onRoute(item.name)"
        @close="onClose(item.name)"
        >{{ item.title }}</el-tag
      >
    </div>
    <el-tag class="hq-alive-tag_empty" type="danger" @click="onEmpty"
      >清空</el-tag
    >
  </div>
</template>

<script setup lang="ts">
import { watch, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useSessionStorage } from '@/hooks'
import { useUserStore } from '@/stores'

const route = useRoute()
watch(
  () => route.name,
  () => {
    onCacheRoutes()
    onCacheLately()
  }
)

// 缓存路由
const cacheNameOrders = useSessionStorage<{ name: string; title: string }[]>(
  'cacheNameOrders',
  []
)
onBeforeMount(() => {
  onCacheRoutes()
})
function onCacheRoutes() {
  if (!route.name || !route.meta.keepAlive) return
  const idx = cacheNameOrders.value.findIndex(item => item.name === route.name)
  if (idx === -1) {
    if (cacheNameOrders.value.length >= 10) {
      cacheNameOrders.value = cacheNameOrders.value.slice(1)
      console.log(cacheNameOrders)
    }
    cacheNameOrders.value.push({
      title: route.meta.title as string,
      name: route.name as string
    })
  }
}

// 缓存近期动态
const userStore = useUserStore()
onBeforeMount(() => {
  onCacheLately()
})
function onCacheLately() {
  if (!route.name) return
  userStore.setRecords({
    title: route.meta.title as string,
    name: route.name as string,
    lastViewTime: Date.now(),
    params: route.params,
    query: route.query
  })
}

// 删除缓存
function onClose(name: string) {
  if (!name) return
  cacheNameOrders.value = cacheNameOrders.value.filter(
    item => item.name !== name
  )
}

// 路由跳转
const router = useRouter()
function onRoute(name: string) {
  router.push({ name: name })
}

// 清空
function onEmpty() {
  if (!route.name) {
    return
  }
  cacheNameOrders.value = []
  cacheNameOrders.value.push({
    title: route.meta.title as string,
    name: route.name as string
  })
}
</script>

<style scoped lang="scss">
.hq-alive-tag {
  width: 100%;
  height: 40px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-shadow: 1px 1px 1px #ddd;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  &_container {
    overflow-x: auto;
    overflow-y: hidden;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &_ml {
    margin-right: 10px;
    cursor: pointer;
  }
  &_empty {
    cursor: pointer;
  }
}
</style>
